<style lang="less">
.upload-wapper{
    margin-bottom: 16px;
    background-color: rgb(186, 223, 245);
    box-sizing: content-box;
    width: 60px;
    height: 60px;
    padding: 3px;
    border-radius: 3px;
    .upImg{
        display: block;
        width: 60px;
        height: 60px;
    }
}

</style>

<template>
    <div>
        <Card dis-hover>
            <p slot="title">{{L('UserProfile')}}</p>
            <div class="page-body">
                <div class="upload-wapper">
                    <my-upload field="img"
                        @crop-upload-success="cropUploadSuccess"
                        :width="60"
                        :height="60"
                        :url="uploadUrl"
                        :params="params"
                        :headers="headers"
                        v-model="uploadShow"
                        :with-credentials = 'false'
                        img-format="png"></my-upload>
                    <img class="upImg" :src="user.avatar | absUrl" @click="toggleShow">
                </div>
                <Form ref="userForm" label-position="left" :label-width="100" :rules="userRule" :model="user">
                    <FormItem :label="L('UserName')" prop="userName">{{user.userName}}</FormItem>
                    <FormItem :label="L('Name')" prop="name">
                        <Input v-model="user.name" :maxlength="32"></Input>
                    </FormItem>
                    <FormItem :label="L('MobileNumber')" prop="phoneNumber">
                        <Input v-model="user.phoneNumber" :maxlength="32"></Input>
                    </FormItem>
                </Form>
                <div class="footer">
                    <Button size="small" @click="save" type="primary">{{L("Save")}}</Button>
                </div>
            </div>
            <Spin size="large" fix v-if="spinShow"></Spin>
        </Card>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "@/lib/util";
import AbpBase from "@/lib/abpbase";
import Ajax from "../../../lib/ajax";
import User from "../../../store/entities/user";
import 'babel-polyfill';
import myUpload from 'vue-image-crop-upload/upload-2.vue';
import appconst from '@/lib/appconst';

@Component({
    components: { myUpload }
})
export default class OwnSpace extends AbpBase {
    
    user: User = new User();
    spinShow: boolean = false;

    uploadUrl:string = appconst.remoteServiceBaseUrl + '/Picture/UploadPicture'
    uploadShow:boolean = false;

    headers = {
        "Authorization": "Bearer " + window.abp.auth.getToken(),
        ".AspNetCore.Culture": window.abp.utils.getCookieValue("Abp.Localization.CultureName"),
        "Abp.TenantId": window.abp.multiTenancy.getTenantIdCookie()
    };

    params= {
        pictureType: "Other"
    }

    toggleShow() {
        this.uploadShow = !this.uploadShow;
    }
    cropUploadSuccess(jsonData, field){
        //console.log(jsonData);
        this.user.avatar = '/' + jsonData.result.url;
        this.uploadShow = false;
    }
    created() {
        // this.user.name = this.$store.state.session.user.name;
        // this.user.userName = this.$store.state.session.user.userName;
        // this.user.phoneNumber = this.$store.state.session.user.phoneNumber;

        Object.assign(this.user,this.$store.state.session.user);
    }
    async save() {
        (this.$refs.userForm as any).validate(async (valid: boolean) => {
            if (valid) {
                let postData = {
                    name: this.user.name,
                    phoneNumber: this.user.phoneNumber,
                    avatar: this.user.avatar
                };
                this.spinShow = true;
                let rep = await Ajax.put(
                    "/api/services/app/User/UpdateProfile",
                    postData
                );
                setTimeout(() => {
                    this.$store.dispatch("session/init");
                }, 3000);
                this.spinShow = false;
                this.$Message.success(
                    this.L(
                        "UpdateSuccessMessage",
                        undefined,
                        this.L("UserProfile")
                    )
                );
            }
        });
    }
    userRule = {
        name: [
            {
                required: true,
                message: this.L(
                    "FieldIsRequired",
                    undefined,
                    this.L("SupplierName")
                ),
                trigger: "blur"
            }
        ],
        phoneNumber: [
            {
                required: true,
                message: this.L(
                    "FieldIsRequired",
                    undefined,
                    this.L("MobileNumber")
                ),
                trigger: "blur"
            },
            {
                pattern: /^1[3456789]\d{9}$/,
                message: this.L(
                    "IncorrectFormat",
                    undefined,
                    this.L("MobileNumber")
                ),
                trigger: "blur"
            }
        ]
    };
}
</script>